<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-30 12:02:12
 * @LastEditTime: 2023-06-30 10:39:24
-->
<script lang="ts" setup name="OrgItems">
import type { PropType } from 'vue'
import { computed } from 'vue'
import { ikArray } from 'iking-utils'

const props = defineProps({
  modelValue: {
    type: Array as PropType<
      Array<{
        elementType: string
        elementName: string
        initiatorName?: string
        managerName?: string
        initiatorType?: string
        managerType?: string
      }>
    >,
    default: () => {
      return []
    }
  },
  // 展示模式
  readonly: {
    type: Boolean,
    default: false
  },
  // 显示ICON
  showIcon: {
    type: Boolean,
    default: true
  },
  inTable: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits<{
  (e: 'update:modelValue', val: any): void
}>()

const _value: Ref<any> = computed({
  get() {
    return ikArray.listGroupByKey(
      props.modelValue.map(v => {
        return {
          elementName: v.elementName || v.initiatorName || v.managerName,
          elementType: v.elementType || v.initiatorType || v.managerType
        }
      }),
      'elementType',
      true
    )
  },
  set() {
  }
})

const removeOrgItem = (index: number) => {
  _value.value.splice(index, 1)
  emits('update:modelValue', _value.value)
}
</script>

<template>
  <div v-if="!readonly" style="margin-top: 10px;">
    <slot name="left"></slot>
    <el-tag
      v-for="(org, index) in _value"
      :key="`${index}_org`"
      class="org-item"
      type="info"
      closable
      size="large"
      effect="plain"
      @close="removeOrgItem(index)"
    >
      <span>
        <template v-if="showIcon">
          <template v-if="org?.elementType === 'DEPT'">
            <Dep_svg />
          </template>
          <template v-else-if="org?.elementType === 'USER'">
            <Avatar_svg />
          </template>
          <template v-else-if="org?.elementType === 'ROLE'">
            <Role_svg />
          </template>
          <template v-else-if="org?.elementType === 'POST'">
            <Post_svg />
          </template>
        </template>
        <p class="text-over-line max-w-[200px]">{{ org.elementName }}</p>
      </span>
    </el-tag>
    <slot name="right"></slot>
  </div>
  <div v-else class="org-item readonly" :class="{ 'in-table': inTable }">
    <slot name="left"></slot>
    <template v-for="(org, index) in _value" :key="`${index}_org`">
      <span class="flex align-center">
        <template v-if="showIcon">
          <template v-if="org?.elementType === 'DEPT'">
            <Dep_svg />
          </template>
          <template v-else-if="org?.elementType === 'USER'">
            <Avatar_svg />
          </template>
          <template v-else-if="org?.elementType === 'ROLE'">
            <Role_svg />
          </template>
          <template v-else-if="org?.elementType === 'POST'">
            <Post_svg />
          </template>
        </template>
        <p class="text-over-line m-w[200px]">
          {{ org?.elementName }}
          {{ (index < _value.length - 1) && (_value.length > 1) ? '、' : '' }}
        </p>
      </span>
    </template>
    <slot name="right"></slot>
  </div>
</template>

<style lang="scss" scoped>
.org-item {
  margin-right: 4px;
  margin-left: 0;
  margin-bottom: 8px;

  span {
    // margin-left: 4px;
  }

  :deep(.el-tag__content) {
    display: inline-flex;
    align-items: center;
  }

  svg {
    margin-right: 5px;
    width: 20px;
    height: auto;
    fill: var(--ik-main-icon-deep-color);
  }

  &.readonly {
    display: inline-flex;
    flex-wrap: wrap;

    svg {
      width: 15px;
    }
  }

  &.in-table{
    margin-bottom: 0;
  }
}
</style>
